<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="conditionForm" :model="searchForm" label-position="top">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="编码">
              <el-input v-model="searchForm.code" size="mini" placeholder="编码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="名称">
              <el-input v-model="searchForm.name" size="mini" placeholder="名称" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-container">
      <el-row style="margin-bottom: 10px;">
        <el-button icon="el-icon-search" type="primary" size="mini" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-close" type="danger" size="mini" @click="onClear">清空</el-button>
        <el-button icon="el-icon-plus" type="success" size="mini" @click="onAdd">新增</el-button>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        :height="calcTableHeight"
        :stripe="true"
        @row-click="rowClick"
      >
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column label="编号" prop="code" width="150">
          <template slot-scope="scope">
            <el-button type="text" class="link-btn" @click.stop="itemEdit(scope.row)">{{ scope.row.code }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" width="150" />
        <el-table-column label="状态" prop="state" width="100" />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="创建人" prop="createBy" />
        <el-table-column label="创建时间" width="165">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.createDate && dateFormat(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改人" prop="updateBy" />
        <el-table-column label="修改时间" width="165">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.updateDate && dateFormat(scope.row.updateDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click.stop="edit(scope.row)">修改</el-button>
            <el-button size="mini" @click.stop="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageVo.currentPage"
        :page-sizes="[15, 50, 100, 500]"
        :page-size="pageVo.pageSize"
        :total="pageVo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <NewEditor ref="NewEditor" :row-data="rowData" :type="editorType" />
    <ItemEditor ref="ItemEditor" :row-data="rowData" />
  </div>
</template>
<script>
import NewEditor from './components/editor'
import ItemEditor from './components/itemEditor'
export default {
  components: {
    NewEditor,
    ItemEditor
  },
  filters: {

  },
  data() {
    return {
      // ----------------------搜索部分-------------------------
      searchForm: {},
      list: [],
      listLoading: false,
      rowData: {},
      editorType: '',
      // ----------------------表格部分-------------------------
      // 表格值集
      multipleSelection: [],
      calcTableHeight: '500px',
      pageVo: {
        total: 0,
        status: true,
        pageSize: 15,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.getHeight()
    this.getData()
    this.$nextTick(() => {
      this.calcTableHeight = this.$Utils.setTableHeight(this, 10)
    })
  },
  methods: {
    getHeight() {
      this.$nextTick(() => {
        this.calcTableHeight = this.$Utils.setTableHeight(this)
      })
    },
    // 查询按钮
    onSearch() {
      this.handleCurrentChange(1)
    },
    // 清空按钮
    onClear() {
      for (const i in this.searchForm) {
        this.searchForm[i] = ''
      }
    },
    // 新增
    onAdd(data) {
      this.$refs.NewEditor.dialogFormVisible = true
      this.editorType = 'add'
      if (this.selectRow && this.selectRow.id) {
        this.rowData = {
          parentId: this.selectRow.id,
          parentName: this.selectRow.name
        }
      }
    },
    edit(row) {
      this.rowData = row
      this.$refs.NewEditor.dialogFormVisible = true
      this.editorType = 'edit'
    },
    del(row) {
      this.$confirm('删除, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          id: row.id
        }
        this.$store.dispatch('system/lookup/remove', params).then((data) => {
          this.$message({ message: '删除成功', type: 'success' })
          this.onSearch()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    itemEdit(row) {
      console.log(row)
      this.rowData = row
      this.$refs.ItemEditor.dialogFormVisible = true
    },
    // 获取数据
    async getData() {
      this.listLoading = true
      const params = {
        ...this.searchForm,
        pageNum: this.pageVo.currentPage,
        pageSize: this.pageVo.pageSize
      }
      this.$store.dispatch('system/lookup/page', params).then((data) => {
        var records = data.records
        this.list = records
        this.pageVo.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    rowClick(row, column, event) {
      this.selectRow = row
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style scoped lang="scss">
.condition-search-form {
  text-align: left;
}
.app-container {
  padding: 10px;
  box-sizing: border-box;
  .app-container-container {
    padding: 10px;
    margin: 6px 0 0;
    background: #fff;
  }
}

.el-table .warning-row {
  background: rgb(156, 205, 205);
}

.el-table .success-row {
  background: rgb(255, 255, 225);
}

.link-btn {
  padding: 0;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
</style>
